<template>
    <div id="pay">
		<top-nav :title="title"></top-nav>
        <div class="password-pay-div">
            <div class="pay-content">
                <input v-model="password" type="password" minlength="6" maxlength="6" id="pay-password" placeholder="支付密码">
                <div class="hint-div">请输入网站支付密码，而不是微信支付密码</div>
                <button @click="cliSure" id="sure-integral-blance-pay">确定</button>
                <div class="pay-div-bottom">
                    <a @click="setPayPassword" class="flr">忘记密码</a>
                </div>
            </div>
        </div>
        <submit-fail ref="submitFail" />
    </div>
</template>

<script>
// 自定义方法
import { getQueryStrParams } from "_commonFn/url"
import { failTextVantToa, loadingVantToa, clearVantToa } from "_projectFn/prompt"
import { commonRequestData } from '_network/request'
import { isLoginChose } from '_projectFn/login'
import { enterUserSetPayPassword } from '_projectFn/page'

// 自定义组件
import TopNav from "_components/project/common/TopNav"
import SubmitFail from "_components/project/ShowWindow/SubmitFail"

// vue全家桶
import Router from '_router/router'

export default {
    name: 'Pay',
    data() {
        return {
            queryStr: {},
            password: '',
            title: '请输入支付密码',
            checkWechatInfo: ['UserBusBrowseWechat', 'UserIndexBrowseWechat']
        }
    },
    methods: {
        setQueryStrParams() {
            this.queryStr = getQueryStrParams({
				params: ["type", "page", "no1", "no2", "no3"]
			})
        },
        // 点击确定
        cliSure() {
            if (isLoginChose()) {
                if (this.password.length === 6) {
                    if (this.checkWechatInfo.includes(this.queryStr.type)) {
                        this.toPwdPayBrowseWechat(this.password)
                    }
                } else {
                    failTextVantToa('密码需6位')
                }
            }
        },
        // 执行查看微信
        toPwdPayBrowseWechat(password = this.password) {
            loadingVantToa({})
            commonRequestData({
                apiName: 'UserIndex_MyWeChat',
                requestData: {
                    UserId: this.queryStr.no1,
                    PayPwd: password
                }
            })
            .then(res => {
                console.log('密码支付查看微信 res：', res)
                if (res.errcode == 0) {
                    clearVantToa()
                    failTextVantToa('支付成功,请查看!')
                    this.successFn(res.data)
                } else {
                    if (res.errcode != -2 && res.errCode != 1100 && res.errcode != 1010) {
                        if (res.errcode == 1010) {
                            this.showSubmitFailWindow()
                        } else {
                            failTextVantToa()
                        }
                    } else {
                        clearVantToa()
                    }
                }
            }, res => {
                console.log('fail: res', res)
                if (res.errcode != 2000) {
                    failTextVantToa()
                }
            })
            .catch(res => {
                console.log('catch：res', res)
                failTextVantToa()
            })
        },
        // 支付成功判断
        successFn(data) {
            sessionStorage.setItem('successEvent', JSON.stringify({
                page: this.queryStr.page,
                type: `${this.queryStr.type}Success`,
                data
            }))
            Router.go(-1)
        },
        setPayPassword() {
            enterUserSetPayPassword()
        },
        // 显示提交失败弹窗
        showSubmitFailWindow() {
            this.$refs.submitFail.showWindow()
        },
    },
    mounted() {
        this.setQueryStrParams()
    },
    activated() {
        this.setQueryStrParams()
        this.password = ''
    },
    components: {
        TopNav,
        SubmitFail,
    }
}
</script>

<style lang="scss" scoped>
.password-pay-div {
    padding: 0 15px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .password-pay-div-explain {
        font-size: 28px;
        color: #333333;
        text-align: center;
        height: 100px;
        line-height: 100px;
        font-weight: bold;
    }

    .pay-content {
    
        #pay-password {
            border: 1px solid #aeaeae;
            width: 100%;
            height: 40px;
            border-radius: 3px;
            outline: none;
            text-indent: 10px;
            margin-top: 40px;
        }
        
        .hint-div {
            color: red;
            text-align: left;
            width: 100%;
        }
        
        #sure-integral-blance-pay {
            border: 0;
            width: 100%;
            height: 45px;
            margin-top: 15px;
            border-radius: 3px;
            background: #007ebc;
            color: white;
            font-size: 18px;
        }
        
        .pay-div-Bottom {
            height: 30px;
            line-height: 30px;
            width: 100%;
        }
    }
}
</style>